<template>
  <!-- 运营工单 -->
  <!-- 取消订单 -->
  <el-dialog
    v-if="workInfo.taskStatusTypeEntity.statusId === 3 && isRepair === false"
    title="工单详细"
    :visible="workInfoShow"
    @close="$emit('update:workInfoShow',false),$emit('update:replenishmentDialogShow',false)"
  >
    <div class="el-dialog-body">
      <div class="task-status">
        <div class="left-tt">
          <img class="naozhong" src="@/assets/indexhome/quxiao.png" alt="">
          <span class="txt">{{ workInfo.taskStatusTypeEntity.statusName }}</span>
        </div>
        <img class="pic" src="@/assets/indexhome/quxiao1.png" alt="">
      </div>
      <!-- 内容 -->
      <div class="my-el-rows">
        <el-row type="flex" justify="space-between">
          <el-col>设备编号：<span>{{ workInfo.innerCode }}</span> </el-col>
          <el-col>创建日期：<span>{{ workInfo.createTime }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>取消日期：<span>{{ workInfo.updateTime }}</span> </el-col>
          <el-col>运营人员：<span>{{ workInfo.userName }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单类型：<span>{{ workInfo.taskType.typeName }}</span> </el-col>
          <el-col>补货数量：<span class="buhuo" @click="showInfo">补货详情</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单方式：<span>{{ userType(workInfo.reateType) }}</span> </el-col>
          <el-col>取消原因：<span>{{ workInfo.desc }}</span> </el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="isFalse-btn" @click="createWork">重新创建</el-button>
    </span>
  </el-dialog>
  <!-- 完成订单 -->
  <el-dialog
    v-else-if="workInfo.taskStatusTypeEntity.statusId === 4&& isRepair === false"
    title="工单详细"
    :visible="workInfoShow"
    @close="$emit('update:workInfoShow',false),$emit('update:replenishmentDialogShow',false)"
  >
    <div class="el-dialog-body">
      <div class="task-status">
        <div class="left-tt">
          <img class="naozhong" src="@/assets/indexhome/wancheng1.png" alt="">
          <span class="txt">{{ workInfo.taskStatusTypeEntity.statusName }}</span>
        </div>
        <img class="pic" src="@/assets/indexhome/wancheng.png" alt="">
      </div>
      <!-- 内容 -->
      <div class="my-el-rows">
        <el-row type="flex" justify="space-between">
          <el-col>设备编号：<span>{{ workInfo.innerCode }}</span> </el-col>
          <el-col>创建日期：<span>{{ workInfo.createTime }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>取消日期：<span>{{ workInfo.updateTime }}</span> </el-col>
          <el-col>运营人员：<span>{{ workInfo.userName }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单类型：<span>{{ workInfo.taskType.typeName }}</span> </el-col>
          <el-col>补货数量：<span class="buhuo" @click="showInfo">补货详情</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单方式：<span>{{ userType(workInfo.reateType) }}</span> </el-col>
          <el-col>备注：<span>{{ workInfo.desc }}</span> </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
  <!-- 待办工单 -->
  <el-dialog
    v-else-if="workInfo.taskStatusTypeEntity.statusId === 1&& isRepair === false"
    title="工单详细"
    :visible="workInfoShow"
    @close="$emit('update:workInfoShow',false),$emit('update:replenishmentDialogShow',false)"
  >
    <div class="el-dialog-body">
      <div class="task-status">
        <div class="left-tt">
          <img class="naozhong" src="@/assets/indexhome/naozhong.png" alt="">
          <span class="txt">{{ workInfo.taskStatusTypeEntity.statusName }}</span>
        </div>
        <img class="pic" src="@/assets/indexhome/pic.png" alt="">
      </div>
      <!-- 内容 -->
      <div class="my-el-rows">
        <el-row type="flex" justify="space-between">
          <el-col>设备编号：<span>{{ workInfo.innerCode }}</span> </el-col>
          <el-col>创建日期：<span>{{ workInfo.createTime }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>运营人员：<span>{{ workInfo.userName }}</span> </el-col>
          <el-col>工单类型：<span>{{ workInfo.taskType.typeName }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>补货数量：<span class="buhuo" @click="showInfo">补货详情</span> </el-col>
          <el-col>工单方式：<span>{{ userType(workInfo.reateType) }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>备注：<span>{{ workInfo.desc }}</span> </el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="isFalse-btn" @click="clearWork">取消工单</el-button>
    </span>
  </el-dialog>
  <!-- 运维工单 -->
  <el-dialog
    v-else-if="workInfo.taskStatusTypeEntity.statusId === 3 && isRepair === true"
    title="工单详细"
    :visible="workInfoShow"
    @close="$emit('update:workInfoShow',false),$emit('update:replenishmentDialogShow',false)"
  >
    <div class="el-dialog-body">
      <div class="task-status">
        <div class="left-tt">
          <img class="naozhong" src="@/assets/indexhome/quxiao.png" alt="">
          <span class="txt">{{ workInfo.taskStatusTypeEntity.statusName }}</span>
        </div>
        <img class="pic" src="@/assets/indexhome/quxiao1.png" alt="">
      </div>
      <!-- 内容 -->
      <div class="my-el-rows">
        <el-row type="flex" justify="space-between">
          <el-col>设备编号：<span>{{ workInfo.innerCode }}</span> </el-col>
          <el-col>创建日期：<span>{{ workInfo.createTime }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>取消日期：<span>{{ workInfo.updateTime }}</span> </el-col>
          <el-col>运营人员：<span>{{ workInfo.userName }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单类型：<span>{{ typeName(workInfo.taskType) }}</span> </el-col>
          <el-col>工单方式：<span>{{ userType(workInfo.reateType) }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>取消原因：<span>{{ workInfo.desc }}</span> </el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="isFalse-btn" @click="createWork">重新创建</el-button>
    </span>
  </el-dialog>
  <!-- 完成订单 -->
  <el-dialog
    v-else-if="workInfo.taskStatusTypeEntity.statusId === 4&& isRepair === true"
    title="工单详细"
    :visible="workInfoShow"
    @close="$emit('update:workInfoShow',false),$emit('update:replenishmentDialogShow',false)"
  >
    <div class="el-dialog-body">
      <div class="task-status">
        <div class="left-tt">
          <img class="naozhong" src="@/assets/indexhome/wancheng1.png" alt="">
          <span class="txt">{{ workInfo.taskStatusTypeEntity.statusName }}</span>
        </div>
        <img class="pic" src="@/assets/indexhome/wancheng.png" alt="">
      </div>
      <!-- 内容 -->
      <div class="my-el-rows">
        <el-row type="flex" justify="space-between">
          <el-col>设备编号：<span>{{ workInfo.innerCode }}</span> </el-col>
          <el-col>创建日期：<span>{{ workInfo.createTime }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>取消日期：<span>{{ workInfo.updateTime }}</span> </el-col>
          <el-col>运营人员：<span>{{ workInfo.userName }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单类型：<span>{{ workInfo.taskType.typeName }}</span> </el-col>
          <el-col>工单方式：<span>{{ userType(workInfo.reateType) }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>备注：<span>{{ workInfo.desc }}</span> </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
  <!-- 待办工单 -->
  <el-dialog
    v-else-if="workInfo.taskStatusTypeEntity.statusId === 1&& isRepair === true"
    title="工单详细"
    :visible="workInfoShow"
    @close="$emit('update:workInfoShow',false),$emit('update:replenishmentDialogShow',false)"
  >
    <div class="el-dialog-body">
      <div class="task-status">
        <div class="left-tt">
          <img class="naozhong" src="@/assets/indexhome/naozhong.png" alt="">
          <span class="txt">{{ workInfo.taskStatusTypeEntity.statusName }}</span>
        </div>
        <img class="pic" src="@/assets/indexhome/pic.png" alt="">
      </div>
      <!-- 内容 -->
      <div class="my-el-rows">
        <el-row type="flex" justify="space-between">
          <el-col>设备编号：<span>{{ workInfo.innerCode }}</span> </el-col>
          <el-col>创建日期：<span>{{ workInfo.createTime }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>运营人员：<span>{{ workInfo.userName }}</span> </el-col>
          <el-col>工单类型：<span>{{ workInfo.taskType.typeName }}</span> </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>工单方式：<span>{{ userType(workInfo.reateType) }}</span> </el-col>
          <el-col>备注：<span>{{ workInfo.desc }}</span> </el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="isFalse-btn" @click="clearWork">取消工单</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { clearWork } from '@/api'
export default {
  name: '',
  components: {},
  props: {
    workInfoShow: {
      type: Boolean,
      default: false
    },
    workInfo: {
      type: Object,
      required: true
    },
    replenishmentDialogShow: {
      type: Boolean,
      required: true
    },
    isRepair: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    userType: () => (typeId) => typeId === 1 ? '手动' : '自动',
    typeName: () => (type) => type === null ? '撤机工单' : type.typeName
  },
  watch: {},
  created() {
  },
  methods: {
    // 显示补货详细
    showInfo() {
      this.$emit('update:replenishmentDialogShow', true)
    },
    createWork() {
      this.$emit('update:createDialogShow', true)
      this.$emit('createWorlApi')
    },
    // 取消订单
    clearWork() {
      this.$confirm('取消工单后，将不能恢复，是否确认取消？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async() => {
        try {
          await clearWork(this.workInfo.taskId, '')
          this.$emit('update:workInfoShow', false)
          this.$emit('updateMyShiTu')
        } catch (error) {
          this.$message.error(error.response.data)
        }
      }).catch(() => {

      })
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.el-dialog{
  position: relative;
  width: 630px;
  border-radius: 10px;
  height: 401px;
  .buhuo{
    color: #4368e1;
    cursor: pointer;
  }
  .my-el-rows{
    height: 144px;
    padding: 0 40px;
    .el-col{
      height: 36px;
      line-height: 36px;
      span{
        display: inline-block;
        margin-left: 10px;
      }
    }
    .beizu{
      position: relative;
      left: -2px;
    }
  }
  .el-dialog-body{
    height: 213px;
  .task-status{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    margin-bottom: 25px;
    background-color: hsla(0,0%,92.5%,.39);
    .pic{
      margin-right: 76px;
    margin-bottom: 7px;
    }
    .left-tt{
      display: flex;
      align-items: center;
          .naozhong{
      margin-left: 22px;
    }
    .txt{
     margin-left: 16px;
    color: rgba(0,0,0,.85);
    }
    }
  }
  }
 .el-dialog__footer{
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: 0;
   height: 76px;
   width: 100%;
   padding: 0 20px 40px;
.isFalse-btn{
  width: 80px!important;
  height: 36px!important;
  background-color: #fbf4f0!important;
  color: #655b56!important;
  padding: unset;
  border: unset;
  font-size: 14px!important;
  &:hover{
   background-color:#f3e7e1!important
  }
  }
}
.el-dialog__header {
   border-radius: 10px;
   line-height: 22px;
   font-size: 16px!important;
   font-weight: 600!important;
   height: 52px;
   background-color: #fff!important;
   .el-dialog__title{
     color: #333!important;
   }
  }
   .el-dialog__close{
    color: #909399!important;
    &:before{
     color: #909399!important;
    }
   }
}
</style>
